@use "@/common/styles/colors"

.app-navigation
  height: 100%
  padding: 1rem 0.5rem
  background-color: colors.$lighter-background
  display: flex
  box-sizing: border-box
  flex-direction: column
  align-items: center
  border-right: 2px solid colors.$dark-gray
  user-select: none

  .settings-item
    box-sizing: border-box
    width: 100%
    padding: 0.75rem 1.5rem
    margin-top: 1rem
    display: flex
    gap: 0.8rem
    border-radius: 1rem
    border: 1px solid transparent
    cursor: pointer

    svg
      width: 2rem
      height: 2rem

    h2
      margin: 0

    &:hover
      border: 1px solid colors.$gray
  .settings-item-active
    background-color: colors.$dark-gray
    border: 1px solid colors.$gray